<template>
	<view class="top-box">
		<page-head :transparent='false'>
		    <slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
		</page-head>
		<view class="banner">
			<image :src="banner1" mode="widthFix"></image>
			<image :src="banner2" mode="widthFix"></image>
		</view>
		<view class="imgList1">
			<image
				v-for="(item, i) in topList" :key="i"
				class="topPro"  
				:src="item.image" 
				@click="linkTo(item.url,i)"
				mode="widthFix" >
			</image>
		</view>
		<view class="banner">
			<image class="banner3" :src="banner3" mode="widthFix"></image>
		</view>
		<view class="moreList1">
			<image
				v-for="(item, i) in topList1" :key="i"
				class="topPro" 
				:style="item.height"  
				:src="item.image" 
				@click="linkTo(item.url,i)"
				mode="" >
			</image>
		</view>
		<view class="banner">
			<image class="banner4" :src="banner4" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import banner1 from '../../static/img/goodBuy/bg11.png';
	import banner2 from '../../static/img/goodBuy/bg21.png';
	import banner3 from '../../static/img/goodBuy/bg31.png';
	import banner4 from '../../static/img/goodBuy/bg41.png';
	import pro1 from '../../static/img/goodBuy/pro11.png';
	import pro2 from '../../static/img/goodBuy/pro21.png';
	import pro3 from '../../static/img/goodBuy/pro31.png';
	import pro4 from '../../static/img/goodBuy/pro41.png';
	import pro5 from '../../static/img/goodBuy/pro51.png';
	import mpro1 from '../../static/img/goodBuy/mpro11.png';
	import mpro2 from '../../static/img/goodBuy/mpro21.png';
	import mpro3 from '../../static/img/goodBuy/mpro31.png';
	import mpro4 from '../../static/img/goodBuy/mpro41.png';
	import mpro5 from '../../static/img/goodBuy/mpro51.png';
	import mpro6 from '../../static/img/goodBuy/mpro61.png';
	import mpro7 from '../../static/img/goodBuy/mpro71.png';
	import mpro8 from '../../static/img/goodBuy/mpro81.png';
	import mpro9 from '../../static/img/goodBuy/mpro91.png';
	import mpro10 from '../../static/img/goodBuy/mpro100.png';
	export default {
		data () {
			return {
				title: '京”选爆款',
				banner1:banner1,
				banner2:banner2,
				banner3:banner3,
				banner4:banner4,
				topList:[
					{image: pro1, url: '../selfdetail/selfdetail?skuId=7617&cid=408&title=美的（Midea）电压力锅5L智能家用预约高压锅一锅双胆MY-SS5048P&seller=好品购'},
					{image: pro2, url: '../selfdetail/selfdetail?skuId=7624&cid=711&title=长寿花 食用油 压榨一级葵花籽油 4L&seller=好品购'},
					{image: pro3, url: '../selfdetail/selfdetail?skuId=7618&cid=332&title=奔腾（POVOS）电热水壶电水壶 食品级304不锈钢 双层防烫烧水壶1.5L S1557&seller=好品购'},
					{image: pro4, url: '../selfdetail/selfdetail?skuId=7627&cid=536&title=天堂伞官方旗舰店梵高系列遮阳伞黑胶防晒伞小巧便携遮阳伞五折晴雨伞 梵高五折 8#杏树外图 50cm*6k&seller=好品购'},
					{image: pro5, url: '../selfdetail/selfdetail?skuId=7620&cid=344&title=长虹（CHANGHONG）遥控空调扇 冷风机 冷风扇 家用冷气扇 移动水冷空调扇 RFS-20R&seller=好品购'}
				],
				topList1:[
					{image: mpro1, url: '../selfdetail/selfdetail?skuId=7619&cid=371&title=美旅拉杆箱 男女商务行李箱静音万向轮TSA锁旅行箱大容量可扩展 24英寸吴磊同款密码箱79B浅紫色&seller=好品购'},
					{image: mpro2, url: '../selfdetail/selfdetail?skuId=6903&cid=374&title=SWISSGEAR 双肩包男商务笔记本电脑包14/15.6英寸大容量旅行背包防泼水书包SA-9393III 黑色&seller=京东自营'},
					{image: mpro3, url: '../selfdetail/selfdetail?skuId=7630&cid=351&title=小熊（Bear）破壁机 多功能家用智能预约加热豆浆机料理机 榨汁机果汁搅拌机 绞肉机辅食机双杯新款PBJ-B10N1&seller=好品购'},
					{image: mpro4, url: '../selfdetail/selfdetail?skuId=7622&cid=344&title=美菱（MeiLing）电风扇/塔扇/落地扇 无叶风扇 遥控定时 MTF-01-R&seller=好品购'},
					{image: mpro5, url: '../selfdetail/selfdetail?skuId=7621&cid=417&title=攀高（PANGAO）颈椎按摩器 PG-2601B8 颈椎按摩仪 颈部护理 礼品版（新老包装交替发货）&seller=好品购'},
					{image: mpro6, url: '../selfdetail/selfdetail?skuId=7625&cid=566&title=好视力 led台灯减蓝光阅读台灯 爱护儿童爱眼学习读写台灯 大学生宿舍寝室 卧室书桌床头灯 9档调光色&seller=好品购'},
					{image: mpro7, url: '../selfdetail/selfdetail?skuId=7626&cid=410&title=德尔玛（Deerma）加湿器 4L大容量 上加水智能恒湿 家用卧室静音迷你办公室香薰空气加湿 DEM-ST600S&seller=好品购'},
					{image: mpro8, url: '../selfdetail/selfdetail?skuId=7623&cid=393&title=张小泉锋行七件刀具套装 菜刀套装N5489&seller=好品购'},
					{image: mpro9, url: '../selfdetail/selfdetail?skuId=7628&cid=1095&title=佳佰 空调被夏凉被 卡通夏被被子被芯 火烈鸟（兰）200*230&seller=好品购'},
					{image: mpro10, url: '../selfdetail/selfdetail?skuId=7629&cid=240&title=飞利浦（PHILIPS）耳机头戴式 音乐耳机有线 学生手机耳机 游戏耳机 电脑耳机带麦 SHM7110U&seller=好品购'}
				]
			}
		},
		onLoad() {
			this.genCommonData()
		},
		methods: {
			genCommonData() {
				const that = this
				let url = window.location.href;
				console.log("url===" + url);
				let reg_url = /^[^\?]+\?([\w\W]+)$/,
					reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
					arr_url = reg_url.exec(url),
					ret = {};
				if (arr_url && arr_url[1]) {
					let str_para = arr_url[1],
						result;
					while ((result = reg_para.exec(str_para)) != null) {
						ret[result[1]] = result[2];
					}
				}
				let token = ret.token;
				if (token != '' && token != 'null' && token != null && token != undefined && token != 'undefined') {
					uni.setStorageSync('token', decodeURI(token));
					uni.setStorageSync('bump',ret.bump);
				}
			},
			linkTo(url,index) {
				if(url !== '') {
					// console.log('url='+url);
					/* uni.navigateTo({
						url: decodeURI(url)
					}); */
					onEvent('page_home_mid_banner1_goods' + (parseInt(index) + parseInt(1)));
					setTimeout(function() {
						if (url !== '') {
							h5NavigateTo({
								url: decodeURI(url)
							});
						}
					}, 1000);
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.top-box{
		width: 100%;
		
		.banner{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			
			image{
				width: 100%;
				display: block;
			}
		}
		.imgList1{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			
			image{
				width: 100%;
				display: block;
			}
		}
		.moreList1{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			display: flex;
			flex-flow: wrap;
			image{
				width: 50%;
				display: block;
			}
		}
	}
</style>
